<!DOCTYPE html>

<html class="material-style layout-fixed layout-header-fixed">

<head>
    <title>{{.title}}</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Auric Bootstrap admin template made using Bootstrap 4, it has tons of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="Auric, bootstrap admin template, bootstrap admin panel, bootstrap 4 admin template, admin template">
    <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="/assets/css/style.css" class="style-link">
    <link rel="stylesheet" href="/assets/libs/ladda/ladda.css">
    <link rel="stylesheet" href="/assets/libs/growl/growl.css">
    <!-- toastr -->
    <link rel="stylesheet" href="/assets/libs/toastr/toastr.css">
    <link rel="stylesheet" href="/assets/css/login.css">

</head>

<body>
    <div class="page-loader">
        <div class="bg-primary"></div>
    </div>
    <!-- [ Preloader ] End -->
    <!-- [ content ] Start -->
    <div class="authentication-wrapper authentication-3">
        <div class="authentication-inner">
            <!-- [ Side container ] Start -->
            <!-- Do not display the container on extra small, small and medium screens -->
            <div class="d-none d-lg-flex col-lg-8 align-items-center ui-bg-cover ui-bg-overlay-container p-5 bg-img ">
                <div class="w-100 h-100 d-flex align-items-center">
                    <!-- [ Text ] Start -->
                    <div class="w-100 left-word d-flex justify-content-center">
                        <img src="/assets/img/bg-word.jpg">
                    </div>
                    <!-- [ Text ] End -->
                </div>

            </div>
            <!-- [ Side container ] End -->

            <!-- [ Form container ] Start -->
            <div class="d-flex col-lg-4 align-items-center bg-white p-5">
                <!-- Inner container -->
                <!-- Have to add `.d-flex` to control width via `.col-*` classes -->
                <div class="d-flex col-sm-7 col-md-5 col-lg-12 px-0 px-xl-5  mx-auto">
                    <div class="w-100 px-xl-5 form-content">
                        <div class="passwordLogin">
                            <div class="right-sign">
                                <img src="/assets/img/logo.png">
                            </div>
                            <form action="" id="validation-form-login">
                                <div class="login-title">欢迎使用力马智慧工厂管理系统</div>
                                <div class="login-word">登录您的账号</div>
                                <div class="m-t-10">
                                    <div class="form-group">
                                        <label class="form-label">您的账号</label>
                                        <input type="text" name="username" class="form-control" placeholder="" autocomplete="off" id="username">
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">输入密码</label>
                                        <input type="password" name="password" class="form-control" placeholder="" autocomplete="off" id="password">
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group d-flex justify-content-between">
                                        <label class="form-check">
                                            <input class="form-check-input" type="checkbox" id="remember_me" name="remember_me">
                                            <span class="form-check-label label-font">记住我</span>
                                        </label>
                                        <div class="rememberPassword">忘记密码</div>
                                    </div>
                                    <button class="btn-content btn-login ladda-button">登录</button>
                                    <button class="btn-content code-login btn-word m-t-10" onclick="fun_codeLogin()">扫描二维码登录
                                    </button>
                                </div>
                                <div class="m-t-100 d-flex  flex-column">
                                    <div class="d-flex justify-content-center">阅读并接受
                                        <div class="word-blue">《服务条款》</div>
                                        和
                                        <div class="word-blue">《隐私政策》</div>
                                    </div>
                                    <div class="d-flex justify-content-center m-t-36">没有账号?
                                        <div class="register-word" onclick="registerId()">注册账号</div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="registerPage d-none">
                            <div class="right-sign">
                                <img src="/assets/img/logo.png">
                            </div>
                            <form action="" id="validation-form-register">
                                <div class="login-title">欢迎使用力马智慧工厂管理系统</div>
                                <div class="login-word">账号注册</div>
                                <div class="m-t-10">
                                    <div class="form-group">
                                        <label class="form-label">请输入公司名称</label>
                                        <input type="text" name="company_name" class="form-control" placeholder="" autocomplete="off"
                                               id="">
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">请输入手机号码</label>
                                        <input type="text" name="mobile" class="form-control" placeholder="" autocomplete="off"
                                               id="mobileValue">
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">输入短信验证码</label>
                                        <div class="form-row justify-content-between ">
                                            <input type="text" name="code" class="form-control col-md-8 m-b-5" placeholder=""
                                                   autocomplete="off"
                                                   oninput="value=value.replace(/[^\d]/g,'')">
                                            <button type="text" id="downCount" class="btn btn-color col-md-3 m-b-5"
                                                    onclick="acquire()">发送
                                            </button>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group position-relative">
                                        <label class="form-label">输入密码</label>
                                        <input type="password" name="password" class="form-control" placeholder="" autocomplete="off"
                                               id="inputPsw">
                                        <div class="position-absolute ab-t-l" id="inputPsw-eye"
                                             onclick="fun_switch('inputPsw','inputPsw-eye')">
                                            <img src="/assets/img/eye-off.png" alt="" class="eye">
                                            <img src="/assets/img/eye.png" alt=""
                                                 class="display-n eye-off">
                                        </div>

                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="form-group position-relative">
                                        <label class="form-label">确认密码</label>
                                        <input type="password" name="re_password" class="form-control" placeholder="" autocomplete="off"
                                               id="checkPsw">
                                        <div class="position-absolute ab-t-l" id="checkPsw-eye"
                                             onclick="fun_switch('checkPsw','checkPsw-eye')">
                                            <img src="/assets/img/eye-off.png" alt="" class="eye">
                                            <img src="/assets/img/eye.png" alt=""
                                                 class="display-n eye-off">
                                        </div>
                                    </div>

                                    <button class="btn-content btn-login ladda-button">注册</button>
                                    <button class="btn-content code-login btn-word m-t-10" onclick="fun_login()">已有账号登录</button>
                                </div>
                                <div class="m-t-100 d-flex  flex-column">
                                    <div class="d-flex justify-content-center">阅读并接受
                                        <div class="word-blue">《服务条款》</div>
                                        和
                                        <div class="word-blue">《隐私政策》</div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="codeLogin d-none">
                            <div class="right-sign">
                                <img src="/assets/img/logo.png">
                            </div>
                            <div class="login-title">欢迎使用力马智慧工厂管理系统</div>
                            <div class="login-word">二维码登录</div>
                            <div class="m-t-10">
                                <div id="qrCode" class=" w-100 d-flex justify-content-center m-b-20  position-relative">
                                    <!--   二维码失效  -->
                                    <div id="invalidCode" class="w-100 h-100 position-absolute display-n">
                                        <div class="d-flex justify-content-center m-b-20 w-100 h-100 ">
                                            <div class="mask"></div>
                                            <div class="position-absolute code-font d-flex flex-column justify-content-center align-items-center h-100">
                                                <div>二维码已过期请刷新</div>
                                                <img class="refresh-img" onclick="refreshCode()"
                                                     src="/assets/img/refresh.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group d-flex justify-content-center">
                                    <div class="ScanCode ">使用手机端扫码登录</div>
                                </div>
                                <button class="btn-content code-login btn-word m-t-10" onclick="fun_login()">返回账号登录</button>
                            </div>
                            <div class="m-t-50 d-flex  flex-column">
                                <div class="d-flex justify-content-center m-t-36">没有账号?
                                    <div class="register-word" onclick="registerId()">注册账号</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ Form container ] End -->
        </div>
        <input type="hidden" name="referer" value="{{.referer}}">
    </div>
    <!-- Core scripts -->
    <script src="/assets/js/vendor.js"></script>

    <script src="/assets/js/script.js"></script>
    <script src="/assets/libs/validate/validate.js"></script>
    <script src="/assets/libs/spin/spin.js"></script>
    <script src="/assets/libs/ladda/ladda.js"></script>
    <script src="/assets/libs/growl/growl.js"></script>
    <script>
        $(function() {
            window.location.hash === '#register' ? switchPage("passwordLogin", "codeLogin") : false
            if(sessionStorage.getItem("username")!=null){
                $('[name=username]').val(sessionStorage.getItem("username"))
            }
            if(sessionStorage.getItem("password")!=null){
                $('[name=password]').val(sessionStorage.getItem("password"))
            }
            var progress = 0;
            // Bind progress buttons and simulate loading progress
            Ladda.bind( '.progress_btn button',{
                callback: function( instance ) {

                    instance.setProgress( progress );
                    var interval = setInterval( function() {
                        instance.setProgress( 300 );
                        if( progress === 1 ) {
                            instance.stop();
                            clearInterval( interval );
                        }
                    }, 200 );
                }
            });
            // Initialize validation
            $('#validation-form-login').validate({
                focusInvalid: false,
                rules: {
                    'username': {
                        required: true,
                    },
                    'password': {
                        required: true,
                    },
                },messages:{
                    username:{
                        required:"用户名不能为空！",
                    },password:{
                        required:"密码不能为空！",
                    }
                },

                errorPlacement: function errorPlacement(error, element) {
                    var $parent = $(element).parents('.form-group');

                    // Do not duplicate errors
                    if ($parent.find('.jquery-validation-error').length) { return; }

                    $parent.append(
                        error.addClass('jquery-validation-error small form-text invalid-feedback')
                    );
                },
                highlight: function(element) {
                    var $el = $(element);
                    var $parent = $el.parents('.form-group');

                    $el.addClass('is-invalid');

                    // Select2 and Tagsinput
                    if ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') {
                        $el.parent().addClass('is-invalid');
                    }
                },
                unhighlight: function(element) {
                    $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
                }
            });
            $("#validation-form-login").submit(function(e){
                if($('#validation-form-login').valid()){
                    $.post("/api/v1/login",$("#validation-form-login").serialize(),function (res){
                        console.log(res)
                        if(res.errcode==0){
                            if($('[name=remember_me]').prop("checked")){
                                sessionStorage.setItem("username",$('[name=username]').val())
                                sessionStorage.setItem("password",$('[name=password]').val())
                            }else{
                                sessionStorage.removeItem("username")
                                sessionStorage.removeItem("password")
                            }
                            jump_url = $("[name=referer]").val()
                            if(jump_url==""){
                                location.href="/web/user/index"
                            }else{
                                location.href=jump_url
                            }
                        }else{
                            progress=1
                            $.growl({
                                title:    '信息',
                                message:  res.message,
                                location: 'cc',
                                duration:2000
                            });
                        }
                    })
                }else{
                    progress=1
                }
                return false
            });
            $('#validation-form-register').validate({
                focusInvalid: false,
                rules: {
                    'company_name': {
                        required: true,
                    },
                    'mobile': {
                        required: true,
                    },
                    'code': {
                        required: true,
                    },
                    'password': {
                        required: true,
                    },
                    're_password': {
                        required: true,
                        equalTo:"#inputPsw"
                    },
                },
                messages:{
                    company_name:{
                        required:"公司名称不能为空！",
                    },mobile:{
                        required:"请输入手机号！",
                    },code:{
                        required:"请输入验证码！",
                    },password:{
                        required:"密码不能为空！",
                    },re_password:{
                        required:"确认密码不能为空！",
                        equalTo:"两次密码不一致"
                    }
                },
                errorPlacement: function errorPlacement(error, element) {
                    var $parent = $(element).parents('.form-group');

                    // Do not duplicate errors
                    if ($parent.find('.jquery-validation-error').length) { return; }

                    $parent.append(
                        error.addClass('jquery-validation-error small form-text invalid-feedback')
                    );
                },
                highlight: function(element) {
                    var $el = $(element);
                    var $parent = $el.parents('.form-group');

                    $el.addClass('is-invalid');

                    // Select2 and Tagsinput
                    if ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') {
                        $el.parent().addClass('is-invalid');
                    }
                },
                unhighlight: function(element) {
                    $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
                }
            });
            $("#validation-form-register").submit(function(e){
                if($('#validation-form-register').valid()){
                    $.post("/api/v1/signup",$("#validation-form-register").serialize(),function (res){
                        console.log(res)
                        if(res.errcode==0){
                            jump_url = $("[name=referer]").val()
                            alert(jump_url)
                            if(jump_url==""){
                                location.href="/web/user/index"
                            }else{
                                location.href=jump_url
                            }
                        }else{
                            progress=1
                            $.growl({
                                title:    '信息',
                                message:  res.message,
                                location: 'cc',
                                duration:2000
                            });
                        }
                    })
                }else{
                    progress=1
                }
                return false
            });
        });
        let codeDom = document.getElementById("qrCode")
        let invalidCode = document.getElementById("invalidCode")
        let downCount = document.getElementById("downCount")
        //注册登录页面
        function registerId() {
            switchPage("passwordLogin", "codeLogin")
        }

        //切换不同页面
        function switchPage(dom1, dom2) {
            let dom = [...document.getElementsByClassName("form-content")[0].getElementsByClassName("d-none")]
            dom.forEach((item) => {
                item.classList.remove("d-none")
            })
            document.getElementsByClassName(dom1)[0].classList.add("d-none")
            document.getElementsByClassName(dom2)[0].classList.add("d-none")
        }

        //登录页面
        function fun_login() {
            switchPage("registerPage", "codeLogin")
        }

        //二维码登录页面
        function fun_codeLogin() {
            switchPage("passwordLogin", "registerPage")
            createQrCode()
            // setTimeout(function () {
            //     fun_invalid()
            // }, 5000)
        }

        //生成二维码
        function createQrCode() {
            if (codeDom?.children[1]) {
                codeDom?.children[1].remove()
            }
            let long = document.documentElement.clientWidth * (288 / 1920)
            $("#qrCode").qrcode({
                render: "canvas", //设置渲染方式:table和canvas，使用canvas方式性能相对来说比较好.
                width: long, //默认宽度
                height: long, //默认高度
                typeNumber: -1, //计算模式一般默认为-1
                correctLevel: 2, //二维码纠错级别
                background: "#ffffff", //背景颜色
                foreground: "#000000", //二维码颜色
                text: "http://www.baidu.com", //二维码内容：可以直接填一个网址
                //logo图片地址
                // src: 'logo.png'
            });
        }

        // 二维码失效
        function fun_invalid() {
            invalidCode.classList.remove("display-n")
        }

        //刷新二维码
        function refreshCode() {
            invalidCode.classList.add("display-n")
            createQrCode()
        }

        //扫码成功
        function codeSuces() {
            let imgStr = `<img src="/assets/img/codeSuccess.png" alt="">`
            codeDom.innerHTML = imgStr
        }

        //发送的倒计时
        function acquire() {
            let mobileStr = document.getElementById("mobileValue")
            const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

            if (mobileStr.value === '') {
                alert('请填写手机号码')
                return false;
            } else if (!reg.test(mobileStr.value)) {
                alert("手机号码格式不正确！");
                return false;//若手机号码格式不正确则返回false
            }
            let time = 60;
            let setTimeoutS = setInterval(() => {
                time--;
                downCount.innerHTML = time + 's'
                downCount.disabled = true
                downCount.style.backgroundColor = '#DDDEDF'
                downCount.style.color = '#A8A8A8'
                if (time <= 0) {
                    clearInterval(setTimeoutS);
                    downCount.innerHTML = '发送'
                    $("#downCount").removeAttr("disabled");
                    downCount.style.backgroundColor = '#165DFF'
                    downCount.style.color = '#FFF'
                }
            }, 1000);
        }

        //显示密码，隐藏密码
        let inputPsw = document.getElementById('inputPsw')
        let checkPsw = document.getElementById('checkPsw')

        //输入密码的眼睛切换
        function fun_switch(inputDom, imgDom) {
            let eyeList = [...document.getElementById(imgDom).getElementsByTagName('img')]
            eyeList.forEach(item => {
                if (item.className.indexOf('display-n') !== -1) {
                    item.classList.remove('display-n')
                    item.className === 'eye-off' ? document.getElementById(inputDom).type = "text" : document.getElementById(inputDom).type = "password"
                } else {
                    item.classList.add('display-n')
                }
            })
        }
    </script>
</body>
</html>
